import { useState } from 'react'
import { Button } from "antd"
import axios from "../../http/index.ts"
import { useNavigate } from "react-router-dom"
export default function index() {
    let navigate = useNavigate()
    interface User {
        email?: string,
        pwd?: string,
        nickname?: string,
        img?: string,
        tempurl?: string
    }
    let [userinfo, setuserinfo] = useState<User>({
        email: "",
        pwd: "",
        nickname: "",

        tempurl: "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics5.baidu.com%2Ffeed%2Fd8f9d72a6059252d1c224f1420960d365bb5b987.jpeg%40f_auto%3Ftoken%3D1bc09caaa6fe29be2e874cb8972a16dd&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1699635600&t=28fd0584cafcac9d31ae9b6a247d07bb"
    })
    let [img, setImg] = useState("")

    let change = (e: any, type: string) => {
        if (type == "img") {
            // console.log(e.target.files[0], type);
            // userinfo.img = e.target.files[0]
            setImg(e.target.files[0])
            userinfo.tempurl = window.URL.createObjectURL(e.target.files[0])
        }
        else {
            (userinfo as any)[type] = e.target.value
        }
        setuserinfo(JSON.parse(JSON.stringify(userinfo)))
    }
    let regsiter = async () => {
        let f = new FormData()
        f.append("email", (userinfo.email as string))
        f.append("pwd", (userinfo.pwd as string))
        f.append("nickname", (userinfo.nickname as string))
        // console.log(userinfo.img, userinfo.tempurl, x, "------------")
        f.append("img", img)
        let res = await axios.post("/egg/register", f)//"http://localhost:5173/api/egg/register"
        console.log(res)
        if (res.data.code == 2000) {
            navigate({ pathname: "/jack/login" }, { state: { email: userinfo.email, pwd: userinfo.pwd } })
        }
        else {
            alert(res.data.info)
        }
    }
    return (
        <div>
            <h1>注册页面</h1>
            email<input type="text" value={userinfo.email} onInput={(e) => change(e, "email")} /> <br />
            pwd <input type="text" value={userinfo.pwd} onInput={(e) => change(e, "pwd")} /> <br />
            nickname <input type="text" value={userinfo.nickname} onInput={(e) => change(e, "nickname")} /> <br />
            img  <br />
            <div style={{ width: "300px", height: "300px", backgroundImage: `url(${userinfo.tempurl})`, backgroundSize: "300px 300px" }}>
                <input style={{ width: "300px", height: "300px", opacity: 0 }} type="file" onInput={(e) => change(e, "img")} />
            </div>

            <Button type='link' onClick={regsiter}>注册</Button>
        </div>
    )
}
